<script lang="ts" setup>
import { useLocale } from '@/locale/locale';
import { ref } from 'vue';

const { t } = useLocale();
const carListTipsRef = ref();
const props = defineProps<{
  type: string;
}>();

defineExpose({
  open() {
    carListTipsRef.value.open();
  }
});
</script>

<template>
  <apt-popup-car
    ref="carListTipsRef"
    :showConfirmBtn="false"
    :title="t('TransferProPageInfo')"
    height="80vh"
    title-position="left"
  >
    <view class="apt-car-package-tips-crs-contain">
      <view class="apt-car-package-tips-crs-contain-top">
        <view>
          {{ t('TransferProPageSize') }}
          <text>{{ t('TransferProForReference') }}</text>
        </view>
        <view>{{ t('TransferProPagePic') }}</view>
      </view>
      <view class="apt-car-package-tips-crs-contain-img">
        <image
          mode="widthFix"
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_package_tips.png"
        />
      </view>
      <view class="apt-car-package-tips-crs-contain-info">
        <view class="apt-car-package-tips-crs-contain-info-title">
          {{ t('TransferProPageLuggage') }}
        </view>
        <view class="apt-car-package-tips-crs-contain-info-cont">
          <view class="red">
            <text>{{ t('TransferProPageLuggageInfo1') }}</text>
          </view>
          <view>
            <text>{{ t('TransferProPageLuggageInfo2') }}</text>
          </view>
          <view>
            <text>{{ t('TransferProPageLuggageInfo3') }}</text>
          </view>
          <view>
            <text>{{ t('TransferProPageLuggageInfo4') }}</text>
          </view>
        </view>
      </view>
    </view>
  </apt-popup-car>
</template>
<style lang="scss">
.apt-car-package-tips-crs-contain {
  padding-bottom: 30rpx;
  &-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    view {
      &:first-child {
        font-weight: 500;
        font-size: 28rpx;
        color: #3d3d3d;
        line-height: 40rpx;

        text {
          font-weight: 400;
          font-size: 24rpx;
        }
      }

      &:last-child {
        font-weight: 400;
        font-size: 24rpx;
        color: #51668f;
        line-height: 34rpx;
      }
    }
  }

  &-img {
    margin-top: 32rpx;

    image {
      display: block;
      width: 100%;
    }
  }

  &-info {
    margin-top: 40rpx;

    &-title {
      font-weight: 500;
      font-size: 28rpx;
      color: #3d3d3d;
      line-height: 40rpx;
    }

    &-cont {
      margin-top: 16rpx;

      view {
        text {
          font-weight: 400;
          font-size: 24rpx;
          color: #3d3d3d;
          line-height: 34rpx;
        }

        &.red {
          text {
            color: #ec1d39;
          }
        }
      }
    }
  }
}
</style>
